<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn :slot-click="true" @click="jumpBackBefore"></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.myReply }}</view>
				<view class="flex-center" @click="submitReport">{{ lang_common.submit }}</view>
			</view>

			<u-gap height="1" bgColor="rgba(0,0,0,0.07)"></u-gap>
		</view>

		<!-- 举报类型 -->
		<view style="padding: 0 30rpx;">
			<view class="u-m-t-32 u-f-30 u-lh-42" style="color: #7A7B7C;">{{ lang_personal.reportTypeTips }}</view>
			<view class="u-m-t-10">
				<u-row>
					<u-col v-for="(item, index) in reports" :key="index" :span="4">
						<view class="u-m-t-18" @click="changeReport(item)">
							<x-common-btn width="220" height="75" :color="hasReport(item) ? '#FFFFFF' : ''"
								:background="hasReport(item) ? 'linear-gradient(to right, #F94404 0%, #FD164F 100%)' : '#FFFFFF'"
								:borderColor="hasReport(item) ? 'rgba(0,0,0,0)' : '#E5E5E5'" borderWidth="2">
								{{ lang_personal[item.key] }}
							</x-common-btn>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<!-- 图片证明 -->
		<view class="u-m-t-98" style="padding: 0 30rpx;">
			<view class="u-f-34 u-lh-48 font-medio">{{ lang_personal.reportImage }}</view>
			<view class="u-f-30 u-lh-42" style="color: #7A7B7C;">{{ lang_personal.reportImageTips }}</view>
			<view class="u-m-t-28">
				<x-upload @change="changeFile" :limitVideoCount="0" @fail="settingValue = 'camera'"></x-upload>
			</view>
		</view>

		<!-- 补充描述 -->
		<view class="u-m-t-90" style="padding: 0 30rpx;">
			<view class="u-f-34 u-lh-48 font-medio">{{ lang_personal.otherDescription }}({{ lang_common.optional }})
			</view>
			<view class="u-m-t-28 description-container">
				<textarea v-model="form.description" resize="none" :rows="7" maxlength="200"
					:placeholder="lang_personal.otherDescriptionTips" style="width: 100%" />
			</view>
		</view>

		<!-- 询问退出弹窗 -->
		<!-- 简介弹窗 -->
		<u-modal v-model="quitVisible" :show-title="false" :content="lang_common.notSaveTips" show-cancel-button
			:cancel-text="lang_common.cancel" :confirm-text="lang_common.done" :confirm-color="'#FD1E43'"
			@confirm="quitAction" z-index="9999999">
		</u-modal>

		<!-- 留空 -->
		<view style="height: 200rpx;"></view>
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { userFeedback } from '@/api/personal.js'
	export default {
		data() {
			let reports = [{
					key: 'report_reactionaryPolitics',
					value: 1,
					label: '反动政治'
				},
				{
					key: 'report_pornographicVulgarity',
					value: 2,
					label: '色情低俗'
				},
				{
					key: 'report_suspectedFraud',
					value: 3,
					label: '涉嫌诈骗'
				},
				{
					key: 'report_advertisingDrainage',
					value: 4,
					label: '广告引流'
				},
				{
					key: 'report_harassmentAbuse',
					value: 5,
					label: '骚扰谩骂'
				},
				{
					key: 'report_bloodyViolence',
					value: 6,
					label: '血腥暴力'
				},
				{
					key: 'report_illegalActivities',
					value: 7,
					label: '违法行为'
				},
				{
					key: 'report_underAge',
					value: 8,
					label: '未成年'
				},
				{
					key: 'report_otherContents',
					value: 9,
					label: '其他内容'
				}
			]
			return {
				reports,

				quitVisible: false,

				form: {
					reportIds: [],
					filelist: [],
					description: ''
				},
				isClick: false,
				settingValue: ''
			}
		},
		onLoad() {

		},
		methods: {
			// 选择举报类型
			changeReport(item) {
				let reportIds = this.form.reportIds
				if (reportIds.includes(item.value)) {
					this.form.reportIds = reportIds.filter(value => item.value !== value)
				} else {
					this.form.reportIds.push(item.value)
				}
			},
			hasReport(item) {
				return this.form.reportIds.includes(item.value)
			},
			// 媒体文件变动后
			changeFile(file) {
				this.form.filelist = file
			},
			// 退出之前询问，前提是已经对数据进行写入
			jumpBackBefore() {
				if (this.form.reportIds.length || this.form.filelist.length || this.form.description) {
					this.quitVisible = true
				} else {
					this.quitAction()
				}
			},
			// 退出举报
			quitAction() {
				this.jumpBack()
				this.quitVisible = false
			},
			// 提交举报信息
			submitReport() {
				let { reportIds, filelist, description } = this.form
				if (!reportIds.length) {
					return this.$api.msg(this.lang_common.typeTips)
				} else if (!filelist.length) {
					return this.$api.msg(this.lang_common.imageTips)
				}
				let contentIds = reportIds.join(',')
				let mediaUrls = filelist.map(item => item.fileUrl).join(',')
				if (this.isClick) return;
				this.isClick = true
				userFeedback({ contentIds, mediaUrls, remark: description }).then(() => {
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => { this.isClick = false })
			}
		}
	}
</script>

<style scoped lang="scss">
	.file-type {
		&-container {
			padding: 48rpx 36rpx calc(env(safe-area-inset-bottom) + 48rpx);
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #FFFFFF;
		}

		&-item {
			width: 200rpx;
			height: 72rpx;
			border-radius: 8rpx;
			background-color: rgba(245, 245, 245, 1);
		}
	}

	.file {
		&-box {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			background-color: #f9f9f9;
			border-radius: 34rpx;
		}

		&-close {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.relation {
		&-avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 14rpx;
			background-color: #f9f9f9;
		}

		&-container {
			padding: 16rpx 22rpx 18rpx;
			border-radius: 16rpx;
			background-color: #f9f9f9;
		}
	}

	.description {
		&-container {
			padding: 26rpx 22rpx;
			border-radius: 10rpx;
			background-color: #F7F8F9;
		}
	}

	.footer {
		border-top: 1rpx solid #aaaaaa;
	}
</style>
